<template>
  <div class="container">
    <div class="bill-detail" v-show="showDetail">
      <div class="weui_cells_title"></div>
      <div class="weui_cells">
        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">诊&nbsp;&nbsp;疗&nbsp;&nbsp;号</span>
              <span class="info">{{cardNo}}</span>
            </p>
          </div>
        </div>
        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</span>
              <span class="info">{{patientName}}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="weui_cells">
        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">流&nbsp;&nbsp;水&nbsp;&nbsp;号</span>
              <span class="info">{{hosPayId}}</span>
            </p>
          </div>
        </div>
        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">发&nbsp;&nbsp;票&nbsp;&nbsp;号</span>
              <span class="info">{{invoiceNo}}</span>
            </p>
          </div>
        </div>
        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">总&nbsp;&nbsp;金&nbsp;&nbsp;额</span>
              <span class="info">{{totalAmt}} 元</span>
            </p>
          </div>
        </div>
        <div class="weui_cell" v-show="!isAllSelfPay">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">自费金额</span>
              <span class="info">{{selfAmt}} 元</span>
            </p>
          </div>
        </div>
        <div class="weui_cell" v-show="!isAllSelfPay">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label" style="width:120px;">社保报销金额</span>
              <span class="info">{{sbPayAmt}} 元</span>
            </p>
          </div>
        </div>
        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</span>
              <span class="info">{{resultMark}}</span>
            </p>
          </div>
        </div>
      </div>
      <div v-show="resultDatas.length > 0" class="weui_cells_title">费用详情：</div>
      <div class="weui_cells">
        <div v-for="rd in resultDatas" class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label" style="width:100px;">费用类型：</span>
              <span class="info">{{rd.feeType}}</span>
            </p>
            <p>
              <span class="label" style="width:100px;">总&nbsp;&nbsp;金&nbsp;&nbsp;额：</span>
              <span class="info">{{rd.totalAmt}}</span>
            </p>
            <p v-show="!isAllSelfPay">
              <span class="label" style="width:100px;">自费金额：</span>
              <span class="info">{{rd.selfAmt}}</span>
            </p>
          </div>
        </div>
      </div>
      <div style="padding-top:20px;">
        <figure style="margin: 0.2em 0.5em;">
          <img style="width: 100%;" src="../../assets/img/nonghangerweima.jpg" />
        </figure>
      </div>
      <p style="align-content: center;">长按图片关注中国农业银行顺德分行微信公众号</p>
    </div>
    <div v-show="showNoRecord">
      <div class="weui_msg">
        <div class="weui_icon_area"><i class="weui_icon_warn weui_icon_msg"></i></div>
        <div class="weui_text_area">
          <h2 class="weui_msg_title">找不到缴费单</h2>
          <p class="weui_msg_desc">
            该缴费单不存在或已退费
          </p>
        </div>
        <div class="weui_opr_area">
          <p class="weui_btn_area">
            <a href="javascript:;" @click="gotoPortal" class="weui_btn weui_btn_primary">返回首页</a>
          </p>
        </div>
      </div>
    </div>
    <partial name="footer-copyright"></partial>
  </div>
</template>
<style scoped>
span.label {
  display: inline-block;
  width: 80px;
}

span.info {
  color: #0ae;
}

.weui_icon_warn.weui_icon_msg:before {
  color: #a5a5a5;
}
</style>
<script>
import _ from 'underscore'

export default {
  name: 'BillOrderDetailView',
  data: function () {
    return {
      id: -1,
      cardNo: '',
      patientName: '',
      hosPayId: '',
      invoiceNo: '',
      totalAmt: '',
      selfAmt: '',
      sbPayAmt: false,
      resultMark: '',
      isAllSelfPay: '',
      resultDatas: [],

      showDetail: true,
      showNoRecord: false,
      resultMsg: ''
    }
  },
  methods: {
    getOrderDetail: function () {
      var self = this
      this.$ajax.get('GetBillOrderDetail', 'Bill', { orderId: this.id }).then(function (data) {
        if (data.ResultCode === '0') {
          self.cardNo = data.CardNo
          self.patientName = data.PatientName
          self.hosPayId = data.HosPayId
          self.invoiceNo = data.InvoiceNo
          self.totalAmt = data.TotalAmt
          self.selfAmt = data.SelfAmt
          self.sbPayAmt = data.SbPayAmt
          self.resultMark = data.ResultMark
          self.isAllSelfPay = data.IsAllSelfPay

          self.resultDatas = _.map(data.ResultDatas, function (val) {
            return {
              feeType: val.FeeType,
              totalAmt: val.TotalAmt,
              selfAmt: val.SelfAmt
            }
          })
        } else {
          self.showDetail = false
          self.showNoRecord = true
        }
      })
    },
    gotoPortal: function () {
      this.$router.replace({ name: 'portal' })
    }
  },
  ready: function () {
    this.id = this.$route.params.orderId
    this.getOrderDetail()
  }
}
</script>
